<template>
	<view :class="showCheckbox ? 'active item':'item'">
		<view class="pix-box" @click="goDetail(item)">
			<image :src="getSrc(item.issueImages)" class="pix"></image>
			<view class="buttom">
				<text class="photographer">拍摄者：{{item.photographer}}</text>
				<text class="date">{{item.discoveryTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object,
			showCheckbox: {
				type: Boolean,
				default: false
			},
		},
		name: "data-checked-item",
		data() {
			return {
				switchStatus: false
			};
		},
		watch: {
			showCheckbox: {
				handler(val, oldval) {
					if (val !== oldval) {
						this.showCheckbox = val
						console.log(this.showCheckbox)
					}
				},
				immediate: false,
				deep: true
			}
		},
		// created() {
		// 	console.log('组件初始化完成');
		// 	this.switchStatus = this.showCheckbox
		// },
		// beforeMount() {
		// 	console.log('准备开始挂在页面元素');
		// 	this.switchStatus = this.showCheckbox
		// },
		// mounted() {
		// 	console.log('组件挂在完成');
		// 	this.switchStatus = this.showCheckbox
		// },
		methods: {
			getSrc(ids) {
				if (ids == null || typeof ids == undefined)
					return
				let idArray = ids.split(',')
				let id = idArray[0]
				if ((typeof id) != undefined && id != '') {
					let _src = uni.$http.baseURL + '/file/download?fileId=' + id
					return _src
				}
			},
			goDetail(item) {
				let _item = encodeURIComponent(JSON.stringify(item))
				let _url = '/mainpkg/project_question_detail/project_question_detail?item='
				uni.navigateTo({
					url: _url + _item
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 100%;
		margin-top: 20rpx;

		// display: block;
		.pix-box {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			margin: 10rpx 0 0 10rpx;
			background: #FFFFFF;
			width: 300rpx;
			height: 400rpx;
			border-radius: 20rpx;

			.pix {
				width: 300rpx;
				height: 300rpx;
			}

			.buttom {
				// width: 305rpx;
				// height: 100rpx;
				display: flex;
				flex-direction: column;
				padding-left: 20rpx;
				padding-bottom: 17rpx;

				.photographer {
					margin-top: 18rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}

				.date {
					margin-top: 16rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
				}
			}

		}

	}

	.active {
		width: 92% !important
	}
</style>
